<template>
  <div>
      <div class="comssto">
          <div class="haerdto">
              <div class="inputtos">
                  <div class="input">
                     <span class="iconfont icon-sousuo_o"></span>
                     <span>搜素感兴趣的课程</span>
                  </div>
                  <div class="text">
                      <span>已购买</span>
                  </div>
              </div>
          </div>
          <div class="bnner">
                <van-swipe :loop="false" :width="300" :show-indicators="false">
                  <van-swipe-item v-for="(item,index) in images" :key="index">
                      <div class="img">
                        <img :src="item" alt="">
                      </div>
                  </van-swipe-item>
                </van-swipe>
          </div>
          <div class="listpps">
              <van-grid :column-num="5">
                <van-grid-item v-for="(value,index) in listspps" :key="index" icon="https://i1.douguo.com//upload/banner/7/4/0/74adad8165f2b080fd78c3531f1d44c0.png" :text="value.name" />
              </van-grid>
          </div>
          <!-- 热卖 -->
          <div class="topclssomto">
              <div class="h3">
                  <span class="left">热卖好课</span>
                  <span class="right">更多</span>
              </div>
              <div class="topmainbner">
                  <van-swipe :loop="false" :width="170" :height="230" :show-indicators="false">
                    <van-swipe-item v-for="i in 6" :key="i">
                       <div class="boto">
                          <div class="img">
                            <span class="tag">直播回看</span>
                            <img src="https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg" alt="">
                            <div class="po">
                                <span class="te">
                                   <span>老师</span>
                                </span>
                                <span class="te">
                                  123
                                </span>
                            </div>
                          </div>
                          <div class="text">
                              <span class="te">
                                  <span class="tag">今日秒杀</span> 无需模具轻松学做789-
                              </span>
                              <span class="tenum">
                                12331人加入学习
                              </span>
                          </div>
                       </div>
                    </van-swipe-item>
                   
                  </van-swipe>
              </div>
          </div>
          <!-- 精品 -->
          <div class="topclssomto">
              <div class="h3">
                  <span class="left">精品新课</span>
                  <span class="right">更多</span>
              </div>
              <div class="topmainbner">
                  <van-swipe :loop="false" :width="170" :height="230" :show-indicators="false">
                    <van-swipe-item v-for="i in 6" :key="i">
                       <div class="boto">
                          <div class="img">
                            <span class="tag">直播回看</span>
                            <img src="https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg" alt="">
                            <div class="po">
                                <span class="te">
                                   <span>老师</span>
                                </span>
                                <span class="te">
                                  123
                                </span>
                            </div>
                          </div>
                          <div class="text">
                              <span class="te">
                                  <span class="tag">今日秒杀</span> 无需模具轻松学做789-
                              </span>
                              <span class="tenum">
                                12331人加入学习
                              </span>
                          </div>
                       </div>
                    </van-swipe-item>
                   
                  </van-swipe>
              </div>
          </div>
          
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data(){
      return{
         images:[
            "https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg",
            "https://cp1.douguo.com/upload/caiku/8/e/e/400x266_8e0768827fa9796bac7a4b1ee450023e.jpg",
            "https://cp1.douguo.com/upload/caiku/a/9/3/400_a933546b20fc100e7c573c4f7fe30853.png",
            "https://i1.douguo.com/upload/keditor_img/20200727/20200727135002_65468.png",
            "https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg",
            "https://cp1.douguo.com/upload/caiku/3/b/e/400x266_3b16e26a07dc7cf7419bb136fc98400e.jpg",
          ],
          listspps:[
              {
                name:"面包",
                icon:""
              },
               {
                name:"甜点",
                icon:""
              },
               {
                name:"中式面点",
                icon:""
              },
               {
                name:"特色小吃",
                icon:""
              },
              {
                name:"家常菜",
                icon:""
              },
              {
                name:"蛋糕",
                icon:""
              },
              {
                name:"饮品",
                icon:""
              },
              {
                name:"热销月饼",
                icon:""
              },
              {
                name:"宝宝辅食",
                icon:""
              },
              {
                name:"vIp免费",
                icon:""
              },
          ],
      }
    }
}
</script>

<style lang="less" >
    .comssto{
      width: 100%;
      height: 100%;
      padding: 10px;
      padding-bottom: 60px;
      box-sizing: border-box;
      .haerdto{
        width: 100%;
        height: 45px;
        .inputtos{
          width: 100%;
          height: 60px;
          padding: 10px;
          background-color: #ffffff;
          z-index: 20;
          box-sizing: border-box;
          position: fixed;
          top: 0;
          left: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .input{
            width: 80%;
            height: 40px;
            border-radius: 6px;
            background-color: #f5f5f5;
            padding: 10px;
            box-sizing: border-box;
            display:flex;
            justify-content: left;
            align-items: center;
            font-size: 14px;
            color:#d6d7d6;
            span{
              color:#d6d7d6;
              &.iconfont{
                font-size: 18px;
                margin-right: 6px;
              }
            }
          }
          .text{
            width: 15%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #85b4ba;
          }
        }
      }
      .bnner{
        width: 100%;
        height: 120px;
        margin-top: 10px;
        .img{
          width: 95%;
          height: 112px;
          border-radius: 8px;
          img{
            width: 100%;
            height: 100%;
            margin: auto;
            border-radius: 8px;
          }
        }
      }
      .listpps{
        width: 100%;
        height: 150px;
        margin-top: 10px;
        .van-hairline::after{
          border: transparent;
        }
        .van-grid-item{
          height: 75px;
          .van-grid-item__text{
            font-size: 12px;
          }
        }
      }
      .topclssomto{
        width: 100%;
        margin-top: 10px;
        .h3{
          width: 100%;
          height: 40px;
          padding-left: 5px;
          padding-right: 5px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span{
            &.left{
              font-size: 16px;
              color:#202020;
              font-weight: 600;
            }
            &.right{
              font-size: 12px;
              color:#9dc2c8;
              font-weight: 600;
            }
          }
        }
        .topmainbner{
          width: 100%;
          height: 230px;
          .boto{
            width: 95%;
            height: 230px;
            border-radius: 10px;
            .img{
              width: 100%;
              height: 160px;
              border-radius: 10px;
              position: relative;
              overflow: hidden;
              .tag{
                position: absolute;
                top: 5px;
                left: 5px;
                padding: 3px ;
                border-radius: 4px;
                font-size: 10px;
                background-color: #ffce31;
              }
              .po{
                width: 100%;
                height: 40px;
                position: absolute;
                bottom: 10px;
                text-align: center;
                span{
                  &.te{
                    display: block;
                    margin-top: 5px;
                    span{
                      padding: 2px;
                      background-color: #ffffff;
                      color: black;
                      border-radius: 2px;
                      font-size: 10px;
                    }
                    color: white;
                    font-size: 12px;
                  }
                }
                
              }
              img{
                width: 100%;
                height: 100%;
                margin: auto;
              }
            }
            .text{
              width: 100%;
              height: 60px;
              margin-top: 10px;
              span{
               
                &.te{
                  display: block;
                  width: 100%;
                  height: 40px;
                  text-align: left;
                  font-size: 14px;
                  overflow: hidden;
                  .tag{
                    // border: 1px solid ;
                    padding: 2px;
                    background-color:#ffce31;
                    border-radius: 4px;
                  }
                }
                &.tenum{
                  display: block;
                   width: 100%;
                  text-align: left;
                  height: 18px;
                  font-size: 10px;
                  color:#dcdcdc;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
    }
</style>